<template>
  <div class="collapse-demo">
    <h3 class="title">基本</h3>
    <h5 class="sub-title">可同时展开多个面板，面板之间不影响</h5>
    <div>
      <d-collapse v-model="value1">
        <d-collapse-item title="迈尔斯·莫拉莱斯">
          终极宇宙里的蜘蛛侠，被一只放射性蜘蛛咬伤，并因此获得了超能力。偶然和其他宇宙的蜘蛛侠相遇，将和他们共同对抗最强反派。
        </d-collapse-item>
        <d-collapse-item title="彼得·帕克">
          616宇宙的蜘蛛侠，他帮助训练迈尔斯·莫拉莱斯正视自己，勇于承担肩上的责任，在这期间也慢慢的找回自我。
        </d-collapse-item>
        <d-collapse-item title="格温·史黛西">
          我是她是一个非常聪明、反应极快的女孩儿，能够以宛如舞者般优雅的身姿穿梭往来，是她所属那个世界的蜘蛛侠。
        </d-collapse-item>
      </d-collapse>
    </div>
    <h3 class="title">手风琴效果</h3>
    <h5 class="sub-title">每次只能展开一个面板</h5>
    <div>
      <d-collapse v-model="value2" accordion>
        <d-collapse-item title="迈尔斯·莫拉莱斯">
          终极宇宙里的蜘蛛侠，被一只放射性蜘蛛咬伤，并因此获得了超能力。偶然和其他宇宙的蜘蛛侠相遇，将和他们共同对抗最强反派。
        </d-collapse-item>
        <d-collapse-item title="彼得·帕克">
          616宇宙的蜘蛛侠，他帮助训练迈尔斯·莫拉莱斯正视自己，勇于承担肩上的责任，在这期间也慢慢的找回自我。
        </d-collapse-item>
        <d-collapse-item title="格温·史黛西">
          我是她是一个非常聪明、反应极快的女孩儿，能够以宛如舞者般优雅的身姿穿梭往来，是她所属那个世界的蜘蛛侠。
        </d-collapse-item>
      </d-collapse>
    </div>
    <h3 class="title">自定义面板标题</h3>
    <h5 class="sub-title">除了可以通过title属性以外，还可以通过具名slot来实现自定义面板的标题内容，以实现增加图标等效果。</h5>
    <div>
      <d-collapse v-model="value3" accordion>
        <d-collapse-item>
          <template slot="title">迈尔斯·莫拉莱斯 <i class="d-icon-bell"></i></template>
          终极宇宙里的蜘蛛侠，被一只放射性蜘蛛咬伤，并因此获得了超能力。偶然和其他宇宙的蜘蛛侠相遇，将和他们共同对抗最强反派。
        </d-collapse-item>
        <d-collapse-item title="彼得·帕克">
          616宇宙的蜘蛛侠，他帮助训练迈尔斯·莫拉莱斯正视自己，勇于承担肩上的责任，在这期间也慢慢的找回自我。
        </d-collapse-item>
        <d-collapse-item title="格温·史黛西">
          我是她是一个非常聪明、反应极快的女孩儿，能够以宛如舞者般优雅的身姿穿梭往来，是她所属那个世界的蜘蛛侠。
        </d-collapse-item>
      </d-collapse>
    </div>
  </div>
</template>

<script>
export default {
  name: 'collapseDemo',
  data () {
    return {
      value1: [0],
      value2: [0],
      value3: [0]
    }
  }
}
</script>

<style lang="stylus" scoped>
// .collapse-demo
</style>
